<template>
	<view class="complain-panel">
		<view class="complaint-btn" :style="{top: top, bottom: bottom}" @click="handleClick">
			投诉
		</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false">
			<view class="panel-content">
				<view class="title">投诉反馈</view>
				<text class="tips">非常感谢你的信息反馈，请填写以下信息，以便工作人员跟进处理。</text>
				<u-form :model="form" ref="uForm" labelPosition="top" labelWidth="100">
					<u-form-item label="反馈标题" prop="title">
						<u-input placeholder="反馈标题" v-model="form.title" />
					</u-form-item>
					<u-form-item label="反馈内容" prop="content">
						<u-textarea placeholder="请填写详细反馈的内容" v-model="form.content"></u-textarea>
					</u-form-item>
				</u-form>
				<u-button color="#283369" @click="submit">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as Api from '@/api/complaint.js'
	import ComplaintTypeEnum from '@/common/enum/ComplaintType.js'
	
	export default {
		name: "ComplainPanel",
		props: {
			top: {
				type: String
			},
			
			bottom: {
				type: String
			},
			
			// 目标id
			targetId: {
				type: Number
			},
			
			// 投诉类型
			type: {
				type: Number
			}
		},
		data() {
			return {
				show: false,
				form: {
					title: '',
					content: ''
				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					}]
				},
			};
		},
		mounted() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			handleClick() {
				this.show = true
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(this.form)
					Api.add({
						form: {
							...this.form,
							target_id: this.targetId,
							type: this.type
						}
					}).then(res => {
						console.log(res)
						this.show = false
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.complain-panel {
		.complaint-btn {
			padding: 6rpx 10rpx;
			position: absolute;
			right: 18rpx;
			bottom: 220rpx;
			font-size: 12px;
			color: #a2a2a2;
		}

		.panel-content {
			width: 750rpx;
			box-sizing: border-box;
			padding: 40rpx 36rpx;
			
			.title{
				margin-bottom: 12rpx;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
			}

			.tips {
				margin-bottom: 10rpx;
				color: #303133;
			}


		}
	}
</style>
